<template>
	<view class="list">
		<swiper
			autoplay
			circular
			disable-touch
			:display-multiple-items="3"
			:duration="2200"
			easing-function="linear"
			:indicator-dots="false"
			:interval="2200"
			next-margin="10rpx"
			:style="{height: height + 'rpx', width: '100%'}"
		>
			<swiper-item :key="index" v-for="(item, index) in list">
				<view class="card" :style="{height: height + 'rpx', width: width + 'rpx'}">
					<view class="card-cont">
						<image :src="item.src" :style="{width: '100%', height: '190rpx'}"></image>
						<view class="card-cont-t1">{{ item.t1 }}</view>
						<view class="card-cont-t2">{{ item.t2 }}</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
export default {
	props: {
		list: {
			type: Array,
			default: () => []
		},
		width: {
			type: Number,
			default: 240
		},
		height: {
			type: Number,
			default: 280
		}
	}
}
</script>

<style lang="scss" scoped>
	.list {
		margin: 0 auto;
		position: relative;
		z-index: 6;
		width: 100%;
		overflow: hidden;
		box-sizing: border-box;

		.card {
			position: relative;
			padding: 0 15rpx;
			box-sizing: border-box;
			.card-cont {
				position: relative;
				width: 100%;
				height: 100%;
				background-color: #fff;
				border-radius: 15rpx;
				overflow: hidden;
				.card-cont-t1 {
					font-weight: 500;
					font-size: 28rpx;
					color: #333333;
					line-height: 40rpx;
				}
				.card-cont-t2 {
					font-weight: 400;
					font-size: 20rpx;
					color: #777777;
					line-height: 28rpx;
					white-space: nowrap; 
					overflow: hidden; 
					text-overflow: ellipsis; 
				}
			}
		}
	}
</style>